<!DOCTYPE html>
<html>
<head>
<base href="${basePath}">
<meta charset="UTF-8">
<title>班级信息</title> $!{include("import_js_css.html")}
<link rel="stylesheet" type="text/css"
	href="${viewPath}/resources/css/class.css">
<style type="text/css">
tr th {
	text-align: center;
	vertical-align: middle;
}

tr td {
	text-align: center;
	vertical-align: middle;
}

.no-left-border-td {
	border-left: 0px !important;
}

.no-right-border-td {
	border-right: 0px !important;
}

button.selectpicker {
	border-right: 0px !important;
	border-top-right-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
}

.select2-choice {
	margin-left: 1px;
	border-top-right-radius: 0px !important; 
	border-bottom-right-radius: 0px !important;
}
</style>
<script type="text/javascript">
var currentTooltip;//当前弹出的气泡对话框
var currentTooltipSchedule;//当前弹出对话框的课程节点
function documentReady(){
	//鼠标滑过，弹出气泡对话框
	 $(document).on("mouseover", ".scheduleShowInfo a", function(){
		currentTooltipSchedule = $(this).parents(".scheduleAllInfo");
		var content = $(".scheduleHiddenInfo", $(this).parent().parent()).html();
		if(currentTooltip){
			currentTooltip.close();
		}
		currentTooltip = tooltip($(this).get(0), content);
	});
	
	$("#memberSelect").select2({
		width: "160px"
	});
	
	$("#productSelect").select2({
		width: "160px"
	});
}
$(function() {
	$(".nav-tabs li a").click(function(e){
		e.preventDefault();//阻止a链接的跳转行为 
        $(this).tab("show");//显示当前选中的链接及关联的content
        $("#tab-index").val($(this).attr("data"));
	});
	
	var tab_index = "${tabIndex}";
	if(tab_index){
		$(".nav-tabs li a[data="+tab_index+"]").tab("show");
		$("#tab-index").val(tab_index);
	}
	
	$(":input[name=checkallids]").click(function(){
		var tbl = $(this).parents("table");
		$(":input[name=chk_name]",tbl).prop("checked",$(this).prop("checked"));
	});
	
	$("#memberSearchBtn").click(function(){
		$("#tab-index").val("memberInfo");
		$("#memberInfoForm").submit();
	});
	
	//快速添加
	$("#quickMemberAdd").click(function(){
		var classId = "${classId}";
		var memberId = $("#memberSelect").select2("val");
		if(memberId == ""){
			error("会员格式不正确");
			return;
		}
		var url = "yueyogaAdmin/addMemberToClass.jhtml";
		$.post(url,{
			"classId" : classId,
			"memberId" : memberId
		},function(res){
			var json = eval("("+res+")");
			if(json.success){
				window.location.href = "yueyogaAdmin/viewClass.jhtml?classId="+classId+"&tabIndex=memberInfo";
			}else {
				error(json.msg || "添加会员失败!");
			}
		});
	});
	
	//删除班级中的会员
	$("#memberDelete").click(function(){
		var classId = "${classId}";
		var chks = $("#memberInfo :input[name=chk_name]:checked");
		if(chks.length > 0) {
			confirm("确定要删除吗?", function() {
				this.close();
				var url = "yueyogaAdmin/deleteMemberOfClass.jhtml";
				var d = wait("正在删除，请稍候...");
				
				var ids = [];
				chks.each(function(index,item){
					ids.push($(item).val());
				});
				
				$.post(url, {"classId":classId,"ids":ids}, function(msg) {
					var json = eval("("+msg+")");
					if (json.success) {
						d.content("删除成功!");
						setTimeout(function(){
							d.close().remove();
							$("#memberInfo :input[name=chk_name]").prop("checked",false);
							window.location.href = "yueyogaAdmin/viewClass.jhtml?classId="+classId+"&tabIndex=memberInfo";
						}, 1000);
					} else {
						d.close();
						error(json.msg || "删除失败!");
					}
				});
			});
		} else {
			alert("请选择要删除的会员");
		}
	});
	
	//快速添加产品
	$("#quickProductAdd").click(function(){
		var classId = "${classId}";
		var productId = $("#productSelect").select2("val");
		var productName = $("#productSelect option:selected").text();
		if (productId == null || productId.length <= 0) {
			error("请选择产品！");
			return;
		}
		var url = "yueyogaAdmin/addProductToClass.jhtml";
		$.post(url,{
			"classId" : classId,
			"productId" : productId,
			"productName" : productName
		},function(res){
			var json = eval("("+res+")");
			if(json.success){
				window.location.href = "yueyogaAdmin/viewClass.jhtml?classId="+classId+"&tabIndex=productInfo";
			}else {
				error(json.msg || "添加产品失败!");
			}
		});
	});
	
	//删除班级对应的产品
	$("#productDelete").click(function(){
		var classId = "${classId}";
		var chks = $("#productInfo :input[name=chk_name]:checked");
		if(chks.length > 0) {
			confirm("确定要删除吗?", function() {
				this.close();
				var url = "yueyogaAdmin/deleteProductOfClass.jhtml";
				var d = wait("正在删除，请稍候...");
				
				var ids = [];
				chks.each(function(index,item){
					ids.push($(item).val());
				});
				
				$.post(url, {"classId":classId,"ids":ids}, function(msg) {
					var json = eval("("+msg+")");
					if (json.success) {
						d.content("删除成功!");
						setTimeout(function(){
							d.close().remove();
							$("#productInfo :input[name=chk_name]").prop("checked",false);
							window.location.href = "yueyogaAdmin/viewClass.jhtml?classId="+classId+"&tabIndex=productInfo";
						}, 1000);
					} else {
						d.close();
						error(json.msg || "删除失败!");
					}
				});
			});
		} else {
			alert("请选择要删除的产品!");
		}
	});
	
	//填入一周课程数据
	<!-- #for(List<ScheduleEntity> weekList : schedules) -->		
	var week = "${for.index}";
		<!-- #for(ScheduleEntity schedule : weekList) -->
		var scheduleItem = "<div class='scheduleShowInfo' style='height:30px;'><a><span class='saveStartDatetime'>${schedule.startTime}</span> ~ <span class='saveEndDatetime'>${schedule.endTime}</span></a></div>";
		scheduleItem += "<div class='scheduleHiddenInfo' style='display:none;'><div style='width:240px;margin-bottom:5px;' data='${schedule.mainTeacherId}' class='saveMainTeacher'>老师：${schedule.mainTeacherName}</div><div style='margin-bottom:5px;' data='${schedule.assistantId}' class='saveAssistant'>助教：${schedule.assistantName}</div><div data='${schedule.placeId}' class='savePlace'>场地：${schedule.placeName}</div></div>";
		$("#weekSchedule td[data="+(parseInt(week)+1)+"]").append("<div class='scheduleAllInfo'>"+scheduleItem+"</div>");
		<!-- #end -->
	<!-- #end -->
});

</script>
</head>
<body>
	$!{include("header.html")}
	<div class="container menu_all">
		<div class="tabbable panel-search-cdt">
			<div class="panel-radius-search-all">
				<div class="container panel-cls tb-jb-bg">
					<!-- #set(ClassEntity classEntity) -->
					<div class="cls-label"><span class="cls-span">班级编号：</span><span>${classId}</span></div>
					<div class="cls-label"><span class="cls-span">班级名称：</span><span>${classEntity.name}</span></div>
					<div class="cls-label" style="margin-top:8px;"><span class="cls-span">班级状态：</span><span>${classEntity.stateName}</span></div>
					<div class="cls-label"><span class="cls-span">负责人：</span><span>${classEntity.officerName}</span></div>
					<div class="cls-label"><span class="cls-span">创建日期：</span><span>${classEntity.createTime.format("yyyy-MM-dd")}</span></div>
				</div>
				<div style="clear: both; height: 5px;">&nbsp;</div>
				<div class="container" style="margin-bottom: 20px;">
					<ul class="nav nav-tabs">
						<li class="active"><a data="baseInfo" href="#baseInfo">基本信息</a></li>
						<li><a data="memberInfo" href="#memberInfo">会员信息</a></li>
						<li><a data="productInfo" href="#productInfo">产品信息</a></li>
					</ul>

					<div class="tab-content">
						<div id="baseInfo" class="tab-pane active"
							style="border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; margin-bottom: 30px;">
							<div id="div_result_member" style="padding: 15px;">
								<div class="form-horizontal">
									<div class="form-group">
										<label for="inputClassName" class="col-sm-1 control-label">名称</label>
										<div class="col-sm-3">
											<input type="text" class="form-control" name="name"
												id="inputClassName" value="${classEntity.name}"
												style="background-color: #fff;" readonly>
										</div>

										<label for="inputClassType" class="col-sm-1 control-label" style="margin-left:100px;">类型</label>
										<div class="col-sm-3">
											<input type="text" class="form-control" name="name"
												id="inputClassName" value="${classEntity.type}"
												style="background-color: #fff;" readonly>
										</div>

										<br /> <br /> <label for="inputClassState"
											class="col-sm-1 control-label">状态</label>
										<div class="col-sm-3">
											<input type="text" class="form-control" name="name"
												id="inputClassName" value="${classEntity.stateName}"
												style="background-color: #fff;" readonly>
										</div>

										<label for="inputClassAssignedTo"
											class="col-sm-1 control-label" style="margin-left:100px;">负责人</label>
										<div class="col-sm-3">
											<input type="text" class="form-control" name="name"
												id="inputClassName" value="${classEntity.officerName}"
												style="background-color: #fff;" readonly>
										</div>
										<br /> <br /> <label for="inputRemarks"
											class="col-sm-1 control-label">备注</label>
										<div class="col-sm-9" style="margin-bottom: 20px;">
											<textarea id="inputRemarks" class="form-control"
												style="width: 743px; height: 80px; resize: none; background-color: #fff;"
												name="remarks" readonly>${classEntity.reamarks}</textarea>
										</div>

										<!-- 设置课程start -->
										<div style="margin: 0 auto; clear: both;">
											<table id="weekSchedule" class="table class-table-add">
												<tr style="text-align: center;">
													<td class="no-left-border class-td-head"><div>星期一</div></td>
													<td class="class-td-head"><div>星期二</div></td>
													<td class="class-td-head"><div>星期三</div></td>
													<td class="class-td-head"><div>星期四</div></td>
													<td class="class-td-head"><div>星期五</div></td>
													<td class="class-td-head"><div>星期六</div></td>
													<td class="class-td-head"><div>星期日</div></td>
												</tr>
												<tr>
													<td class="no-left-border" data="1"></td>
													<td data="2"></td>
													<td data="3"></td>
													<td data="4"></td>
													<td data="5"></td>
													<td data="6"></td>
													<td data="7"></td>
												</tr>
											</table>
										</div>
									</div>
								</div>
							</div>
							$!{include("class_schedule.html")}
						</div>
						<div id="memberInfo" class="tab-pane"
							style="border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; margin-bottom: 30px;">
							<div id="div_result_member" style="padding: 15px;">
								<form id="memberInfoForm" class="form-horizontal" method="post"
									action="yueyogaAdmin/viewClass.jhtml">
									<input type="hidden" name="tabIndex" id="tab-index"
										value="${tabIndex}"> <input type="hidden"
										name="classId" id=classId value="${classId}">

									<div class="form-group">

										<!-- #if(classEntity.type == '固定会员') -->
										<label for="inputMemberName" style="width:50px !important;padding:-15px !important;float:left;" class="control-label">关键字</label>
										<div class="col-sm-3">
											<div class="input-group" style="margin-bottom: 20px;">
												<input type="text" class="form-control"
													name="memberKeywords" id="inputMemberKeywords"> <span
													class="input-group-btn">
													<button class="btn btn-default" type="button"
														id="memberSearchBtn" style="height: 30px;">搜索</button>
												</span>
											</div>
										</div>
										<div class="col-sm-3" style="height: 35px; line-height: 35px;">
											<a
												href="yueyogaAdmin/searchProducts.jhtml?index=consumeList&classId=${classId}">点此查看</a>本班级会员的消费情况
										</div>
										<!-- #end -->
										<!-- #if(classEntity.type == '不定会员') -->
										<div class="col-sm-8">
											本班级无固定会员，<a
												href="yueyogaAdmin/searchProducts.jhtml?index=consumeList&classId=${classId}">点此查看</a>本班级会员的消费情况
										</div>

										<!-- #end -->
										<div style="margin: 0 auto; clear: both;">
											<div class="div_search_result clear">

												<!-- #if(classEntity.type == '固定会员') -->
												<div class="panel-heading panel-result-title"
													style="border-radius: 0 !important; border-top: 1px solid #ddd;">
													<h3 class="panel-title">会员列表</h3>
													<div class="btn-group btn-gp-default" style="width: 300px; margin-top: 2px">
															<select id="memberSelect" name="memberSelect"
																style="border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; float: left;">
																<option value=""> </option>
																<!-- #for(ClassMemberModel mm : allMembers) -->
																<option value="${mm.id}">
																	<!-- #if(mm.memberCode != null && mm.memberCode != "") -->
																	${mm.memberCode}-
																	<!-- #end --> ${mm.name}
																</option>
																<!-- #end -->
															</select>
															
															<button id="quickMemberAdd"
																	class="btn btn-default panel-radius-none" style="height: 30px !important; margin-left: -1px;" type="button">快速添加</button>
													
																<button id="memberDelete"
																	class="btn btn-default panel-radius-right"
																	type="button" style="height: 30px !important; margin-left: -8px !important;">删除</button>
													</div>
													
													
																
													<!--  
													<div class="btn-group btn-gp-default">
														<div class="input-group">
													    	<input type="text" class="form-control" id="" name="" style="width:220px;">
													      	<span class="input-group-btn">
													        	<button class="btn btn-default" type="button" style="margin-left:-2px !important;">搜索</button>
													      	</span>
													    </div>
													</div>
													-->
												</div>
												<table
													class="table table-bordered table-hover table-condensed tb"
													style="text-align: center; border-left: 0px !important; border-right: 0px !important;">
													<tr>
														<td class="no-left-border-td"><input
															name="checkallids" type="checkbox" /></td>
														<td>编号</td>
														<td>卡号</td>
														<td>姓名</td>
														<td>手机号</td>
														<td>年龄</td>
														<td>所在域</td>
														<td class="no-right-border-td">会籍顾问</td>
													</tr>
													<!-- #set(PaginatedList<ClassRecord> classMembers) -->
													<!-- #set(Pager pager = classMembers.pager) -->

													<!-- #for(ClassMemberModel clazzMember : classMembers) -->
													<tr>
														<td class="no-left-border-td"><input name="chk_name"
															type="checkbox" value="${clazzMember.id}" /></td>
														<td><a
															href="yueyogaAdmin/toMemberDetail.jhtml?id=${clazzMember.id}">${clazzMember.id}</a></td>
														<td><a
															href="yueyogaAdmin/toMemberDetail.jhtml?id=${clazzMember.id}">${clazzMember.memberCode}</a></td>
														<td><a
															href="yueyogaAdmin/toMemberDetail.jhtml?id=${clazzMember.id}">${clazzMember.name}</a></td>
														<td>${clazzMember.mobile}</td>
														<td>${clazzMember.age}</td>
														<td>${clazzMember.area}</td>
														<td class="no-right-border-td">${clazzMember.officer}</td>
													</tr>
													<!-- #end -->
												</table>

												<script type="text/javascript">
													$(function(){
														var pageNo = "${pager.pageNo}";
														var pageSize = "${pager.pageSize}";
														var prevPageNo = "${pager.prevPageNo}";
														var nextPageNo = "${pager.nextPageNo}";
														var totalPages = "${pager.countOfTotalPages}";
														var totalResults = "${pager.countOfTotalResults}";
														
														//初始化分页条
														$(".classPageBar ul.pagination").initPageBar({
															pageNo:pageNo,
															pageSize:pageSize,
															prevPageNo:prevPageNo,
															nextPageNo:nextPageNo,
															totalPages:totalPages,
															totalResults:totalResults
														},function(jumpTo,pageSize){
															var pageBar = this;
															var submitForm = pageBar.parents("form");
															submitForm.prepend("<input type='hidden' name='pageNo' value='"+jumpTo+"' />");
															submitForm.prepend("<input type='hidden' name='pageSize' value='"+pageSize+"' />");
															submitForm.submit();
														});
													});
												</script>
												<div class="classPageBar">$!{include("page_bar.html")}</div>
												<!-- #end -->

												<!-- #if(classEntity.type == '不定会员') -->

												<!-- #end -->
											</div>
										</div>
									</div>
								</form>
							</div>
						</div>

						<div id="productInfo" class="tab-pane"
							style="border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; margin-bottom: 30px;">
							<div id="div_result_member" style="padding: 15px;">
								<form id="productInfoForm" class="form-horizontal" method="post"
									action="yueyogaAdmin/viewClass.jhtml">
									<input type="hidden" name="tabIndex" id="tab-index"
										value="${tabIndex}"> <input type="hidden"
										name="classId" id=classId value="${classId}">

									<div class="form-group">
										<div style="margin: 0 auto; clear: both;">
											<div class="div_search_result clear">
												<div class="panel-heading panel-result-title"
													style="border-radius: 0 !important; border-top: 1px solid #ddd;">
													<h3 class="panel-title">产品列表</h3>
													<div class="btn-group btn-gp-default" style="margin-top: 2px;">
															<select id="productSelect" name="productSelect"
																data-live-search="true" class="selectpicker show-tick"
																data-width="200px"
																style="border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; float: left; margin-left: 1px;">
																<option value=""> </option>
																<!-- #for(Product product : productList) -->
																<option value="${product.productId}">${product.name}</option>
																<!-- #end -->
															</select><button id="quickProductAdd"
																	class="btn btn-default panel-radius-none" style="height: 30px !important; margin-left: -1px;" type="button">快速添加</button>
																<button id="productDelete"
																	class="btn btn-default panel-radius-right"
																	type="button" style="height: 30px !important; margin-left: -8px !important;">删除</button>
														
													</div>
												</div>
												<table
													class="table table-bordered table-hover table-condensed tb"
													style="text-align: center; border-left: 0px !important; border-right: 0px !important;">
													<tr>
														<td class="no-left-border-td"><input
															name="checkallids" type="checkbox" /></td>
														<td>编号</td>
														<td>名称</td>
														<td>类型</td>
														<td>价格</td>
														<td class="no-right-border-td">备注</td>
													</tr>
													<!-- #for(ClassProduct cp : classProducts) -->
													<tr>
														<td class="no-left-border-td"><input name="chk_name"
															type="checkbox" value="${cp.productId}" /></td>
														<td><a>${cp.productId}</a></td>
														<td><a>${cp.productName}</a></td>
														<td>${cp.type}</td>
														<td>${cp.price}</td>
														<td class="no-right-border-td">${cp.description}</td>
													</tr>
													<!-- #end -->
												</table>
											</div>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>